<template>
  <div>
    <a-input-search placeholder="请输入权限名称" v-model="searchSysRole.user_role_name" @search="search('getSysUserRoleListInfo')" style="width: 240px; margin-bottom: 10px" />
    <a-table
      :columns="roleColumns"
      :data-source="sysRole"
      :rowKey="record=>record.user_role_id"
      :pagination="RolePagination"
    >
      <template slot="operation" slot-scope="text, record">
        <template>
          <div class="editable-row-operations">
            <a-popconfirm :title="`确定编辑该用户/用户组的”${record.user_role_name}“权限？`" @confirm="() => editUserRoleInfo(record)">
              <a>
                {{ userRole.some(e => {if (e.user_role_id === record.user_role_id) return true}) ? '取消授权' : '授权' }}
              </a>
            </a-popconfirm>
          </div>
        </template>
      </template>
    </a-table>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button type="primary" @click="onClose">
        {{ $t('form.basic-form.form.save') }}
      </a-button>
    </div>
  </div>
</template>

<script>
import {
  getUserRole,
  setUserRole,
  deleteRole,
  getSysUserRoleList,
  getUserGroupRole,
  setUserGroupRole,
  deleteUserGroupRole
} from '@/api/user'

const roleColumns = [
  {
    title: 'user_role_path',
    dataIndex: 'user_role_path',
    width: '10%',
    scopedSlots: { customRender: 'user_role_path' }
  },
  {
    title: 'user_role_name',
    dataIndex: 'user_role_name',
    width: '10%',
    scopedSlots: { customRender: 'user_role_name' }
  },
  {
    title: 'user_role_desc',
    dataIndex: 'user_role_description',
    width: '15%',
    scopedSlots: { customRender: 'user_role_description' }
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    width: '8%',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  name: 'UserRoleDrawer',
  data () {
    return {
      roleColumns,
      RolePagination: {
        total: 0,
        onChange: (page) => {
          this.searchSysRole.page = page
          this.search()
        }
      },
      searchSysRole: {
        page: 1,
        user_role_name: ''
      },
      userRole: [],
      sysRole: [],
      actions: {
        // 用户权限
        userRoles: {
          getUserRole,
          setUserRole,
          deleteRole,
          getSysUserRoleList
        },
        // 用户组权限
        userGroupRoles: {
          getUserRole: getUserGroupRole,
          setUserRole: setUserGroupRole,
          deleteRole: deleteUserGroupRole
        }
      }
    }
  },
  props: {
    // 父组件
    parent: {
      type: Object,
      default: () => {
      }
    },
    // 需要变更权限的 信息
    changeInfo: {
      type: [Array, Object],
      default: () => {
        return []
      }
    },
    roleType: {
      type: String,
      default: () => {
        return 'userRoles'
      }
    }
  },
  watch: {
    changeInfo (value) {
      this.actions[this.roleType].getUserRole(value).then(res => {
        this.userRole = res.items
      })
    }
  },
  mounted () {
    this.actions[this.roleType].getUserRole(this.changeInfo).then(res => {
      this.search()
      this.userRole = res.items
    })
  },
  methods: {
    onClose () {
      this.$emit('close', true)
    },
    editUserRoleInfo (data) {
      data.model = this.changeInfo.model || ''
      data.id = this.changeInfo.user_group_id || this.changeInfo.uid
      if (this.userRole.some(e => {
        if (e.user_role_id === data.user_role_id) return true
      })) {
        // code
        this.actions[this.roleType].deleteRole(data).then(res => {
          this.$message[res.code === 200 ? 'success' : 'warning'](res.msg)
          for (const key in this.userRole) {
            if (this.userRole[key].user_role_id === data.user_role_id) {
              this.userRole.splice(key, 1)
              break
            }
          }
        })
      } else {
        this.actions[this.roleType].setUserRole(data).then(res => {
          this.$message[res.code === 200 ? 'success' : 'warning'](res.msg)
          if (res.code === 200) {
            this.userRole.unshift(data)
          }
        })
      }
    },
    // 获取系统权限
    search () {
      getSysUserRoleList(this.searchSysRole).then(res => {
        this.sysRole = res.items
        this.RolePagination.total = res.count ? res.count : 0
      })
    }
  }
}
</script>

<style scoped>
</style>
